<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="70%"
  >
    <div>
      <formula-code-mirror ref="formulaCodeMirror" :value="cmValue" :fields="filterFields" />
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="box-card">
            <div class="header">
              <el-input
                v-model="filedNameValue"
                placeholder="请输入变量名称"
                prefix-icon="el-icon-search"
                @input="handleFilterFields"
              />
            </div>
            <div class="body">
              <el-scrollbar ref="scrollMenuRef" class="scrollbar-box">
                <ul class="field-list">
                  <li class="field" v-for="f in filterFields" :key="f.key" @click="handleFieldClick(f)">
                    <span class="menu-item with-capsule">{{ f.label }}</span>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="box-card">
            <div class="header">
              <el-input
                v-model="funNameValue"
                placeholder="搜索函数"
                prefix-icon="el-icon-search"
              />
            </div>
            <div class="body">
              <el-scrollbar ref="scrollMenuRef" class="scrollbar-box">
                <el-tree class="fun-tree" ref="funTree" :data="formulaList" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode">
                   <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="handleFunMouseenter(data)">
                      <span>{{ node.label }}</span>
                   </span>
                </el-tree>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="intro-box">
            <span v-html="selectFun.intro"></span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSaveFormula">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FormulaCodeMirror from "./CodeMirror"
import {formulaList} from "./FormulaList"
import {removeHtmlTag} from "../../utils/index"

export default {
  name: "FormFormula",
  components: {FormulaCodeMirror},
  props: {
    /**
     * 公式
     */
    cmValue: {
      type: String,
      default: ''
    },
    /**
     * 全部字段
     */
    fields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      tempFields: [],
      filterFields: [],
      removeHtmlTag: removeHtmlTag,
      filedNameValue: '',
      funNameValue: '',
      formulaList: formulaList,
      selectFun: {
        name: '',
        intro: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    funNameValue(val) {
      this.$refs.funTree.filter(val);
    }
  },
  created() {
    // 转换格式
    this.tempFields = this.fields.map(item => {
      return {key: item.vModel, label: removeHtmlTag(item.config.label)}
    })
    this.filterFields = this.tempFields
  },
  methods: {
    open() {
      this.dialogVisible = true
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleFilterFields() {
      if (!this.filedNameValue) {
        this.filterFields = this.tempFields
      }
      this.filterFields = this.tempFields.filter(item => {
        return item.label.indexOf(this.filedNameValue) > -1
      })
    },
    handleFieldClick(field) {
      this.$refs.formulaCodeMirror.insertVariable(field.key, field.label)
    },
    handleFunMouseenter(data){
      this.selectFun = data
    },
    handleNodeClick(data, node, instance) {
      if (node.level === 1) {
        return
      }
      this.selectFun = data
      this.$refs.formulaCodeMirror.insertFunction(data.name)
    },
    handleSaveFormula() {
      this.$emit('save', this.$refs.formulaCodeMirror.getValue())
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  .body {
    border: 1px solid #dfe4ed;
    border-top: none;
    height: 180px;
  }
}

.scrollbar-box {
  height: 175px;
}

.intro-box {
  height: 210px;
  border: 1px solid #dfe4ed;
  padding: 10px;
}

.field-list {
  display: block;

  .field {
    list-style-type: none;
    line-height: 30px;
    padding-left: 10px;
  }

  .field:hover {
    background: #f6f8f9;
    color: rgba(0, 0, 0, .75);
    cursor: pointer;
  }
}
</style>
